<form class="layui-form layui-card" action="{:request()->url()}" data-auto="true" method="post" autocomplete="off">
    <div class="layui-card-body padding-left-40">

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">登录用户账号</span>
                <span class="color-desc margin-left-5">Username</span>
                {if isset($vo) and isset($vo.username)}
                <input disabled value='{$vo.username|default=""}' class="layui-input layui-bg-gray">
                {else}
                <input name="username" value='{$vo.username|default=""}' required pattern="^.{4,}$" placeholder="请输入4位及以上字符登录用户账号" class="layui-input">
                {/if}
            </label>
            <p class="help-block">登录用户账号创建后，不允许再次修改。</p>
        </div>
        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7" required>绑定用户ID</span>
                <span class="color-desc margin-left-5">user ID</span>
                <input type="text"  autocomplete="off" autofocus name="bind_agent_user_id" value='{$vo.bind_agent_user_id|default=""}'  placeholder="请输入绑定用户ID" class="layui-input">
            </label>
            <p class="color-desc">必选，关联用户，需从会员列表查找用户ID</p>
        </div>
        <div class="layui-form-item" >
            <label class="relative block">
                <span class="color-green font-w7" required>所属区域</span>
                <span class="color-desc margin-left-5">areaInfo</span>
                <div id="area-picker" style="display: inline-block;">
                    <label class="layui-form-label" style="width: 30px;">省份:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="province" {if isset($vo) and isset($vo.provinces_id)} disabled{/if} class="province-selector" data-value="{$vo.provinceName|default=''}" lay-filter="province-1">
                            <option value="">请选择省</option>
                        </select>
                    </div>
                    <label class="layui-form-label" style="width: 30px;">城市:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="city" {if isset($vo) and isset($vo.city_id)} disabled{/if} class="city-selector" data-value="{$vo.cityName|default=''}" lay-filter="city-1">
                            <option value="">请选择市</option>
                        </select>
                    </div>
                    <label class="layui-form-label" style="width: 30px;">县区:</label>
                    <div class="layui-input-inline" style="width: 150px;">
                        <select name="county" {if isset($vo) and isset($vo.county_id)} disabled{/if} class="county-selector" data-value="{$vo.countyName|default=''}" lay-filter="county-1">
                            <option value="">请选择区</option>
                        </select>
                    </div>
                </div>
            </label>
            <p class="help-block" style="display: block;">创建用户后，不允许再次修改。</p>
        </div>

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">用户联系手机</span>
                <span class="color-desc margin-left-5">Phone</span>
                <input type="tel" maxlength="11" autocomplete="off" autofocus name="phone" value='{$vo.phone|default=""}' pattern="^1[3-9][0-9]{9}$" placeholder="请输入用户联系手机" class="layui-input">
            </label>
            <p class="color-desc">可选，用户联系手机号码，需要填写正确的格式</p>
        </div>
        
        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">联系电子邮箱</span>
                <span class="color-desc margin-left-5">Email</span>
                <input name="mail" autocomplete="off" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" value='{$vo.mail|default=""}' placeholder="请输入联系电子邮箱" class="layui-input">
            </label>
            <p class="color-desc">可选，用户联系电子邮箱，需要填写正确的格式</p>
        </div>

        {notempty name='authorizes'}
        <div class="layui-form-item relative">
            <span class="color-green font-w7">角色访问授权</span>
            <span class="color-desc margin-left-5">Authorization</span>
            <div class="layui-textarea">
                {if isset($vo.username) and $vo.username eq 'admin'}
                <span class="color-desc">超级用户不需要配置权限</span>
                {elseif empty($authorizes)}
                <span class="color-desc">未配置权限</span>
                {else}
                {foreach $authorizes as $authorize}
                <label class="think-checkbox layui-unselect">
                    {if in_array($authorize.id, $vo.authorize)}
                    <input type="checkbox" checked name="authorize[]" value="{$authorize.id}" lay-ignore> {$authorize.title}
                    {else}
                    <input type="checkbox" name="authorize[]" value="{$authorize.id}" lay-ignore> {$authorize.title}
                    {/if}
                </label>
                {/foreach}
                {/if}
            </div>
        </div>
        {/notempty}

        <div class="layui-form-item">
            <label class="relative block">
                <span class="color-green font-w7">用户身份描述</span>
                <span class="color-desc margin-left-5">Description</span>
                <textarea placeholder="请输入用户身份描述" class="layui-textarea" name="desc">{$vo.desc|default=""}</textarea>
            </label>
        </div>
       
    </div>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='submit'>保存数据</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消编辑吗？" data-close>取消编辑</button>
    </div>

</form>
<script>
    //配置插件目录
    layui.config({
        base: '__ROOT__/static/plugs/layui/layarea/'
        , version: '1.0'
    });
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'layarea'], function () {
        var layer = layui.layer
            , form = layui.form
            , layarea = layui.layarea;

        layarea.render({
            elem: '#area-picker',
            change: function (res) {
                //选择结果
                console.log(res);
            }
        });
    });
</script>
<script>form.render()</script>
